<template>
  <div class="conversations">

    <!--  往期会话选择列表  -->
    <div class="conversation-list">
      <div class="conversation-list-container">
        <div class="conversation-list-content">
          <div v-if="conversations.length">
            <div
              v-for="(conversation, key) in conversations" :key="key"
              @click="changeGroup(conversation)"
            >
              <div class="conversation" :class="{actived:decideActiveClass(conversation)}" @contextmenu.prevent.stop="e => showRightClickMenu(e,conversation)">
                <div class="avatar">
                  <img :src="conversation.headImage"/>
<!--                  <div v-if="conversation.unread>0"
                       class="unread-count">
                    <span class="unread">{{ conversation.unread }}</span>
                  </div>-->
                </div>
                <div class="conversation-message">
                  <div class="conversation-top">
                    <span class="conversation-name">{{ conversation.groupName }}</span>
                    <div class="conversation-time">
                      <div>{{ formatDate(conversation.msText) }}</div>
                    </div>
                  </div>
                  <div class="conversation-bottom">
                    <div class="conversation-content" v-if="conversation.recalled">
                      <div v-if="conversation.type === 'group'">
                        {{
                          conversation.userIdPash === currentUser.id ? '你' : ``
                        }}撤回了一条消息
                      </div>
                    </div>
                    <div class="conversation-content" v-else>
<!--                      <div class="unread-text"
                           v-if="conversation.lastMessage.read === false && conversation.lastMessage.senderId === currentUser.id">
                        [未读]
                      </div>
                      <div v-if="conversation.type === 'private'">
                        {{ conversation.lastMessage.senderId === currentUser.id ? '我' : conversation.data.name }}:
                      </div>
                      <div v-else>
                        {{
                          conversation.lastMessage.senderId === currentUser.id ? '我' : conversation.lastMessage.senderData.name
                        }}:
                      </div>-->
                      <span class="text"
                            v-if="conversation.msText !== null">{{
                          conversation.msText
                        }}</span>
<!--                      <span v-else-if="conversation.lastMessage.type === 'video'">[视频消息]</span>
                      <span v-else-if="conversation.lastMessage.type === 'audio'">[语音消息]</span>
                      <span v-else-if="conversation.lastMessage.type === 'image'">[图片消息]</span>
                      <span v-else-if="conversation.lastMessage.type === 'file'">[文件消息]</span>
                      <span v-else-if="conversation.lastMessage.type === 'order'">[订单消息]</span>-->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="no-conversation">- 当前没有会话 -</div>
        </div>
      </div>
      <div v-if="rightClickMenu.visible" :style="{'left': rightClickMenu.x + 'px', 'top': rightClickMenu.y + 'px'}"
           class="action-box">
        <div class="action-item" @click="topConversation">{{ rightClickMenu.conversation.top ? '取消置顶' : '置顶' }}</div>
        <div class="action-item" @click="deleteConversation">删除聊天</div>
      </div>
    </div>

    <!--  会话框  -->
    <div class="chat">

      <Component :is="componentName" :groupId="groupId" :currentUser="currentUser"></Component>
    </div>

  </div>
</template>

<script>
import privateChat from "@/views/chat/session/PrivateChat";
import groupChat from "@/views/chat/session/GroupChat";
import {getAllGroupLastOne} from "../../../api/chat/group";
import {getGroupUser} from "../../../api/chat/user";
import {getGroupMessageLastOne} from "../../../api/chat/messages";

  export default {
    name: 'Conversations',
    components: {
      privateChat, groupChat
    },
    props: [
      'chatGroup','currentUser','stompClient','messagePrivateCheck'
    ],
    data() {
      return {
        componentName:"GroupChat",
        conversations:[],
        groupId:0,
        /*
        conversations: [
          {
            "userId": "08c0a6ec-a42b-47b2-bb1e-15e0f5f9a19a",
            "type": "private",
            "lastMessage": {
              "read": true,
              "receiverId": "3bb179af-bcc5-4fe0-9dac-c05688484649",
              "senderId": "08c0a6ec-a42b-47b2-bb1e-15e0f5f9a19a",
              "messageId": "46c42810293511ee8ab80bad4c17f374",
              "timestamp": 1690101929917,
              "type": "text",
              "payload": {"text": "hgjfghj\n"},
              "status": "success"
            },
            "unread": 0,
            "top": false,
            "data": {"name": "Mattie", "avatar": "http://192.168.8.247:9300/statics/2023/07/24/5_20230724130842A017.jpg"}
          },
          {
            "userId": "fdee46b0-4b01-4590-bdba-6586d7617f95",
            "type": "private",
            "lastMessage": {
              "read": false,
              "receiverId": "fdee46b0-4b01-4590-bdba-6586d7617f95",
              "senderId": "3bb179af-bcc5-4fe0-9dac-c05688484649",
              "messageId": "cda317c0293411eea7d31917b83d34c1",
              "timestamp": 1690101725479,
              "type": "order",
              "payload": {
                "id": "251662058022",
                "url": "http://192.168.8.247:9300/statics/2023/07/24/3c51362d7607464782afc3d947a14662_20230724155233A019.jpg",
                "name": "咸柠七",
                "price": "￥8",
                "count": 2
              },
              "status": "success"
            },
            "unread": 0,
            "top": false,
            "data": {"name": "Tracy", "avatar": "https://goeasy-io.gitee.io/show-im/static/images/Avatar-3.png"}
          },
          {
            "groupId": "group-a42b-47b2-bb1e-15e0f5f9a19a",
            "type": "group",
            "lastMessage": {
              "groupId": "group-a42b-47b2-bb1e-15e0f5f9a19a",
              "senderData": {
                "name": "Mattie",
                "avatar": "https://goeasy-io.gitee.io/show-im/static/images/Avatar-1.png"
              },
              "senderId": "08c0a6ec-a42b-47b2-bb1e-15e0f5f9a19a",
              "messageId": "af5d2fc0292611ee8028ef5eaf833868",
              "timestamp": 1690095661461,
              "type": "text",
              "payload": {"text": "\n0"},
              "status": "success"
            },
            "unread": 0,
            "top": false,
            "data": {"name": "小程序交流群", "avatar": "https://goeasy-io.gitee.io/show-im/static/images/wx.png"}
          },
          {
            "userId": "33c3693b-dbb0-4bc9-99c6-fa77b9eb763f",
            "type": "private",
            "lastMessage": {
              "read": false,
              "receiverId": "33c3693b-dbb0-4bc9-99c6-fa77b9eb763f",
              "senderId": "3bb179af-bcc5-4fe0-9dac-c05688484649",
              "messageId": "35fef7d0285411eebba82736e545df46",
              "timestamp": 1690005280927,
              "type": "text",
              "payload": {"text": "你好嘛"},
              "status": "success"
            },
            "unread": 0,
            "top": false,
            "data": {"name": "Juanita", "avatar": "https://goeasy-io.gitee.io/show-im/static/images/Avatar-4.png"}
          }
        ],
        */

        // Conversation右键菜单
        rightClickMenu: {
          conversation: null,
          visible: false,
          x: null,
          y: null,
        },
      };
    },
    created() {
      this.getConversationsBy()
    },
    beforeDestroy() {

    },
    methods: {
      formatDate(t) {
        t = t || Date.now();
        let time = new Date(t);
        let str = time.getMonth() < 9 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
        str += '-';
        str += time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
        str += ' ';
        str += time.getHours();
        str += ':';
        str += time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
        return str;
      },
      getConversationsBy(){
        getGroupUser(this.currentUser.id).then(rep=>{
          this.groupList=rep.data
         /* console.info(234)
          console.info(this.groupList)*/
          this.groupList.forEach(group=>{
            console.info(group)
            getGroupMessageLastOne(group.groupId).then(reps=>{
              console.info(232324)
              console.info(reps)
              reps.data.forEach(message=>{
                message.groupName=group.groupName
                message.headImage=group.headImage
                this.conversations.push(message)
                console.info(5555)
                console.info(this.conversations)

              })
            })
          })
        })
        //得到最近聊天列表
        //先进行查询聊天记录，取前十个不同的好友id的最近时间的一条记录
        /*getAllGroupLastOne(this.currentUser.id).then(rep=>{
          this.conversations = rep.data
          console.info(2323)
          console.info(this.conversations)
          this.componentName="GroupChat"
        })*/
      },
      changeGroup(conversation){
           this.componentName = "groupChat"
           this.groupId = conversation.groupId
      },
      decideActiveClass(conversation){
        // if (conversation !== null&&conversation !== 0){
        //   return false
        // }
        //判断是否要显示选中效果
        if (conversation !== null){
          {
            return conversation.groupId===this.groupId
          }
        }else{
          return true
        }
      },

      listenConversationUpdate() {
        // 监听会话列表变化

      },
      renderConversations(content) {
        this.conversations = content.conversations;
      },
      subscribeGroup() {

      },
      showRightClickMenu(e, conversation) {
        this.rightClickMenu.conversation = conversation;
        this.rightClickMenu.visible = true;
        this.rightClickMenu.x = e.pageX;
        this.rightClickMenu.y = e.pageY;
      },
      hideRightClickMenu() {
        this.rightClickMenu.visible = false;
      },
      topConversation() {
        let conversation = this.rightClickMenu.conversation;
        let description = conversation.top ? '取消置顶' : '置顶';

      },
      deleteConversation() {
        if (confirm('确认要删除这条会话吗？')) {
          let conversation = this.rightClickMenu.conversation;

        }
      },
      // chatLocation(conversation) {
      //   let path = conversation.type === 'private' ?
      //     '/conversations/privatechat/' + conversation.userId :
      //     '/conversations/groupchat/' + conversation.groupId
      //   return {
      //     path: path,
      //     query: {
      //       name: conversation.data.name,
      //       avatar: conversation.data.avatar
      //     }
      //   }
      // }
    },
  };
</script>

<style scoped>
  .conversations {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    color: #333333;
  }

  .conversation-list {
    width: 220px;
  }

  .conversation-list-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: white;
    border-right: #dbd6d6 1px solid;
  }

  .conversation-list-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .conversation-list-content::-webkit-scrollbar {
    display: none;
  }

  .no-conversation {
    text-align: center;
    color: #666666;
  }

  .conversation {
    display: flex;
    padding: 10px 5px;
    cursor: pointer;
  }

  .unread-count {
    position: absolute;
    top: -10px;
    left: 30px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: white;
    background: #d02129;
  }

  .unread-count .unread {
    display: block;
    font-size: 12px;
    text-align: center;
    line-height: 18px;
  }

  .conversation-message {
    flex: 1;
    padding-left: 5px;
    display: flex;
    width: 160px;
    flex-direction: column;
    justify-content: space-around;
  }

  .conversation-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: right;
  }

  .conversation-name {
    font-size: 12px;
    font-weight: 500;
  }

  .conversation-time {
    width: 75px;
    color: #B9B9B9;
    display: flex;
    flex-direction: column;
  }

  .conversation-bottom {
    display: flex;
    color: #666666;
  }

  .conversation-content {
    display: flex;
    width: 160px;
    color: #b3b3b3;
  }

  .conversation-content .text {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    white-space: nowrap;
    word-break: break-all;
  }

  .conversation-bottom .unread-text {
    color: #d02129;
    width: 35px !important;
  }

  .conversation .avatar {
    width: 40px;
    height: 40px;
    position: relative;
  }

  .conversation .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 10%;
  }

  .router-link-active {
    background: #eeeeee;
  }

  .action-box {
    width: 100px;
    height: 60px;
    background: #ffffff;
    border: 1px solid #cccccc;
    position: fixed;
    z-index: 100;
    border-radius: 5px;
  }

  .action-box .action-item {
    padding-left: 15px;
    line-height: 30px;
    font-size: 13px;
    color: #262628;
    cursor: pointer;
  }

  .action-box .action-item:hover {
    background: #dddddd;
  }

  .chat {
    flex: 1;
    display: flex;
  }

</style>
